<template>
  <div>
    <h1>系统信息统计</h1>
    <div ref="mybar"
         id="mybar"></div>
  </div>
</template>

<script>
import { getAdmin } from '../../api/admin'
import { getStudent } from '../../api/student'
import { getCourseList } from '../../api/course'
import { getVideoList } from '../../api/video'
export default {
  name: 'JsxyBar',

  data () {
    return {

    };
  },

  mounted () {
    this.initBar();
  },
  methods: {
    async initBar () {
      var adminRes = await getAdmin({ pageStart: 1 })
      var studentRes = await getStudent({ pageStart: 1 })
      var courseRes = await getCourseList({ pageStart: 1 })
      var videoRes = await getVideoList({ pageStart: 1 });
      // 准备好y轴需要的数据
      var arr = [adminRes.data.data.count, studentRes.data.data.count, courseRes.data.data.count, videoRes.data.data.count]
      // 1初始化echarts实例
      var mycharts = this.$echarts.init(this.$refs.mybar);
      // 2 准备配置项
      var option = {
        tooltip: {
          show: true, // 是否显示
          trigger: 'item', // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            data: [
              { value: arr[0], name: '管理员人数' },
              { value: arr[1], name: '学员人数' },
              { value: arr[2], name: '课程数量' },
              { value: arr[3], name: '视频数量' }
            ],
            type: 'pie',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };

      // 3. 将配置项设置给实例
      mycharts.setOption(option)
    }
  },
};
</script>

<style lang="less" scoped>
#mybar {
  width: 100%;
  height: 320px;
}
h1 {
  text-align: center;
}
</style>